<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";
const option = ref(
    {
      legend: {
        orient: 'vertical',
        right: 20,
        top: '30%',
        textStyle: {
          color: 'white'
        },
      },
      tooltip: {
        trigger: 'axis',
        showContent: false
      },

      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月' ]
      },
      yAxis: { gridIndex: 0 },
      series: [
        {
          name: '金额',
          type: 'bar',

          data: [3, 79, 98, 58, 40, 79]
        },
        {
          name: '数量',
          type: 'bar',

          data: [2, 42, 110, 78, 20, 90]
        }

      ]
    });

</script>

<template>
  <common-box>
    <div class="chart-header">
      采购金额与数量月度趋势
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>